<template>
	<view>
		<Details></Details>

		<view class="botBut">
			<uni-row gutter="20" class="butBox">
				<uni-col :span="12">
					<up-button @click="goFengxian()" shape="circle" text="风险研判"></up-button>
				</uni-col>
				<uni-col :span="12">
					<up-button @click="goXiangshang()" shape="circle" text="向上交办"></up-button>
				</uni-col>
			</uni-row>
		</view>


		<uni-popup ref="fengxianPopup" background-color="#fff">
			<view class="formBox">
				<uni-section title="风险研判" type="line">
					<uni-forms ref="fengxianForm" :rules="fengxianRules" :modelValue="fengxianFormData"
						label-position="top">
						<view style="padding: 0 10px;">
							<uni-forms-item label="预估风险等级" required label-width="120">
								<uni-data-checkbox v-model="fengxianFormData.type" :localdata="typeList" />
							</uni-forms-item>
						</view>
						<uni-card :is-shadow="false" margin="2px 10px 10px 10px">
							<uni-forms-item label="预估风险等级" required name="sex" label-width="120">
								<uni-data-checkbox v-model="fengxianFormData.sex" :localdata="riskLevel" mode="list" />
							</uni-forms-item>
							<uni-forms-item label="研判意见">
								<uni-easyinput type="textarea" v-model="fengxianFormData.introduction"
									placeholder="请输入自我介绍" />
							</uni-forms-item>
							<uni-forms-item label="选择交办部门" required name="department" v-if="fengxianFormData.type==1" label-width="180">
								<uni-easyinput v-model="fengxianFormData.department" placeholder="请选择交办部门" />
							</uni-forms-item>
							<uni-forms-item label="附件">
							</uni-forms-item>
						</uni-card>
					</uni-forms>

					<uni-row gutter="20" class="butBox">
						<uni-col :span="12">
							<up-button @click="closeFengxian()" shape="circle" text="取消"></up-button>
						</uni-col>
						<uni-col :span="12">
							<up-button @click="submitFengxian()" shape="circle" text="保存"></up-button>
						</uni-col>
					</uni-row>
				</uni-section>
			</view>
		</uni-popup>


		<uni-popup ref="xiangshangPopup" background-color="#fff">
			<view class="formBox">
				<uni-section title="向上交办" type="line">
					<uni-card :is-shadow="false" margin="2px 10px 10px 10px">
						<uni-forms ref="xiangshangForm" :modelValue="xiangshangFormData" label-position="top">
							<uni-forms-item label="申请理由">
								<uni-easyinput type="textarea" v-model="xiangshangFormData.introduction"
									placeholder="请输入自我介绍" />
							</uni-forms-item>
						</uni-forms>
					</uni-card>

					<uni-row gutter="20" class="butBox">
						<uni-col :span="12">
							<up-button @click="closeXiangshang()" shape="circle" text="取消"></up-button>
						</uni-col>
						<uni-col :span="12">
							<up-button shape="circle" text="提交"></up-button>
						</uni-col>
					</uni-row>
				</uni-section>
			</view>
		</uni-popup>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import Details from '@/pages/workspace/components/details.vue'

	// 风险研判
	const fengxianPopup = ref(null)
	const fengxianForm = ref(null)
	// 打开
	function goFengxian() {
		fengxianReset()
		fengxianPopup.value.open('bottom')
	}
	// 关闭
	function closeFengxian() {
		fengxianReset()
		fengxianPopup.value.close()
	}
	const fengxianFormData = ref({
		type: 0,
		introduction: '',
		sex: "",
		department: ''
	})
	// 重置
	function fengxianReset(){
		fengxianFormData.value = {
			type: 0,
			introduction: '',
			sex: "",
			department: ''
		}
	}
	const fengxianRules = ref({
		sex: {
			rules: [{
				required: true,
				errorMessage: '预估风险等级不能为空'
			}]
		},
		department: {
			rules: [{
				required: true,
				errorMessage: '交办部门不能为空'
			}]
		}
	})
	const typeList = ref([{
		text: '退回（退回到发现部门）',
		value: 0
	}, {
		text: '交办',
		value: 1
	}])
	const riskLevel = ref([{
		text: '暂无风险（归档到信息掌握）',
		value: 1
	}, {
		text: '低风险',
		value: 2
	}, {
		text: '中风险',
		value: 3
	}, {
		text: '高风险',
		value: 4
	}])

	function submitFengxian() {
		fengxianForm.value.validate().then(res => {
			console.log('success', res);
			uni.showToast({
				title: `校验通过`
			})
		}).catch(err => {
			console.log('err', err);
		})
	}



	// 向上交办
	const xiangshangPopup = ref(null)

	function goXiangshang() {
		xiangshangPopup.value.open('bottom')
	}

	function closeXiangshang() {
		xiangshangPopup.value.close()
	}
	const xiangshangFormData = ref({
		introduction: '',
	})
</script>

<style scoped>
	.botBut {
		width: 100%;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 2;
	}

	.butBox {
		padding: 10px;
	}

	.formBox {
		background-color: #fff;
	}
</style>